import React, { useState, useEffect } from 'react'
import { Tabs, message } from 'antd'
import { RootState, useSelector, useDispatch } from '@/redux'
import { setTabsList, setTabsActive } from '@/redux/modules/tabs'
import { useLocation, useNavigate } from 'react-router-dom'
import { HomeFilled, CloseOutlined } from '@ant-design/icons'
import { HOME_URL } from '@/config/config'
import { searchRoute } from '@/utils/util'
import { routerArray } from '@/routes'
import { TabItem } from '@/redux/type'
import './index.scss'
import MoreButton from './MoreButton'

// 接口继承
interface RealTabItem extends TabItem {
  closeIcon: JSX.Element
}
const LayoutTabs = () => {
  const dispatch = useDispatch()
  const { tabsActive, tabsList } = useSelector((state: RootState) => state.tabs)
  /**给缓存的tab对象添加新的属性 */
  const copyTabList = tabsList.map((item: any) => {
    const obj = {} as RealTabItem // 类型断言
    if (item.key === HOME_URL) {
      obj.key = HOME_URL
      obj.label = '首页'
      obj.closeIcon = <HomeFilled />
    } else {
      obj.key = item.key
      obj.label = item.label
      obj.closeIcon = <CloseOutlined />
    }
    return obj
  })
  const { pathname } = useLocation()
  const navigate = useNavigate()
  const [activeValue, setActiveValue] = useState<string>(tabsActive)
  const [items, setItems] = useState(copyTabList)

  useEffect(() => {
    // 路由改变重置渲染tab
    setItems(copyTabList)
    // 根据路由设置激活页签
    setActiveValue(pathname)
    dispatch(setTabsActive(pathname))
    addTabs()
  }, [pathname])

  const clickTabs = (path: string) => {
    navigate(path)
    dispatch(setTabsActive(path))
  }

  const addTabs = () => {
    if (pathname === HOME_URL) return
    const route = searchRoute(pathname, routerArray)
    const newTabsList = JSON.parse(JSON.stringify(tabsList))
    if (tabsList.every((item: any) => item.key !== route.path)) {
      // 每次有新路由添加tab
      newTabsList.push({ label: route.meta!.title, key: route.path as string })
      setItems([...items, { label: route.meta!.title, closeIcon: <CloseOutlined />, key: route.path as string }])
    }
    dispatch(setTabsList(newTabsList))
    setActiveValue(pathname)
    dispatch(setTabsActive(pathname))
  }

  const removeTab = (tabPath: string) => {
    if (tabPath === HOME_URL) return
    if (pathname === tabPath) {
      tabsList.forEach((item: TabItem, index: number) => {
        if (item.key !== pathname) return
        const nextTab = tabsList[index + 1] || tabsList[index - 1]
        if (!nextTab) return
        navigate(nextTab.key)
        message.info(`关闭了${item.label}标签`)
      })
    }
    setItems(items.filter((i: any) => i.key !== tabPath))
    dispatch(setTabsList(tabsList.filter((item: TabItem) => item.key !== tabPath)))
  }
  return (
    <div className="tabs">
      <Tabs
        animated
        tabPosition="top"
        type="editable-card"
        hideAdd
        activeKey={activeValue}
        onChange={clickTabs}
        onEdit={path => {
          removeTab(path as string)
        }}
        items={items}
      />
      <MoreButton delTabs={removeTab}></MoreButton>
    </div>
  )
}

export default LayoutTabs
